<template>
    <div class="mainBox">
        <div class="header">
            <van-nav-bar title="抽奖记录" left-arrow @click-left="back" />
        </div>
        <img src="../../assets/distribution/top.png" class="topImg" alt="">
        <div class="titleBox">
            <div>分享赚好礼</div>
            <div>天天送不停</div>
        </div>
        <div class="hisList">
            <div class="hisTitle">
                抽奖记录
            </div>
            <div class="hisBox">
                <div class="tabTitle">
                    <span>标识</span>
                    <span>金额</span>
                    <span>日期</span>
                    <span>状态</span>
                </div>
                <div class="tabBox">
                    <template v-if="rulesObj.length != 0">
                        <div class="tabmain" v-for="(item, index) in rulesObj" :key="index">
                            <span>{{ item.recordId }}</span>
                            <span>{{ item.recordMoney }}元</span>
                            <span>{{ item.chouTime }}</span>
                            <span class="btnBox">
                                <span class="btn2">
                                    <template v-if="item.recordFlag == 1">
                                        发放中
                                    </template>
                                    <template v-else>
                                        已发放
                                    </template>
                                </span>
                            </span>
                        </div>
                    </template>
                    <div class="emptyBox" v-else>
                        暂无抽奖记录
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

import { getActivityUserList } from '../../network/active'

export default {
    name: 'HomeR',
    data() {
        return {
            dialog: false,
            rulesObj: [],
            currentRecord: '',
            showPrice: false,
            shareImg: [],
            shopId: localStorage.shopId
        }
    },
    mounted() {

    },
    methods: {
        getRecordes() {
            getActivityUserList({
                userId: localStorage.userId,
            }).then(res => {
                if (res.flag) {
                    this.rulesObj = res.data.filter(item => {
                        return (item.recordFlag == 1 && item.recordChou == 1) || item.recordFlag == 3
                    })
                }
            })

        },
        back() {
            this.$router.go(-1)
        },


    },
    created() {
        this.getRecordes()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.mainBox {
    background-color: #E5001D;
    height: 100vh;
}


.leftIcon {
    position: absolute !important;
    left: 21.9975px;
    bottom: 30px;
    font-size: 36px;
}

.hisBtn {
    padding-bottom: 3.9975px;
    position: absolute;
    top: 159.9975px;
    right: 30px;
    font-size: 26.0025px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 27.9975px;
    border-bottom: 2.0025px solid #fff;
}

.topImg {
    margin-top: 189.9975px;
    width: 750px;
    height: 386.0025px;
}

.titleBox {
    position: absolute;
    top: 255.9975px;
    box-sizing: border-box;
    padding: 0 68.0025px 0 78px;
    width: 100%;
    font-size: 93px;
    font-family: FZZongYi-M05S;
    font-weight: 400;
    color: #FFFFFF;
    text-shadow: -3px 9px 3px #CE192A;
}

.titleBox>div:last-child {
    margin-top: -20.0025px;
    text-align: right;
}

.hisList {
    position: relative;
    z-index: 1;
    margin: -62.0025px 21px 9.9975px;
    width: 708px;
    height: 909.9975px;
    border-radius: 20.0025px;
    background-image: url(../../assets/distribution/hisBg.png);
    background-size: 100% 100%;
}

.hisTitle {
    width: 100%;
    height: 63.9975px;
    text-align: center;
    line-height: 63.9975px;
    font-size: 38.0025px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
}

.hisBox {
    box-sizing: border-box;
    padding: 30px 39.9975px;
    width: 100%;
    height: 90%;
    /* background-color: #fff; */
}

.tabTitle,
.tabmain {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    width: 100%;
}

.tabTitle>span {
    text-align: center;
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #986B15;
}

.tabmain>span {
    text-align: center;
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #986B15;
}




.tabTitle>span:first-child {
    width: 20%;
    /* background-color: #CE192A; */
}

.tabTitle>span:nth-child(2) {
    width: 20%;
    /* background-color: #ccc; */
}

.tabTitle>span:nth-child(3) {
    width: 30%;
    /* background-color: #fff; */
}

.tabTitle>span:nth-child(4) {
    width: 30%;
    /* background-color: aqua; */
}

.tabmain>span:first-child {
    width: 20%;
    /* background-color: #CE192A; */
}

.tabmain>span:nth-child(2) {
    width: 20%;
    /* background-color: #ccc; */
}

.tabmain>span:nth-child(3) {
    width: 30%;
    /* background-color: #fff; */
}

.tabmain>span:nth-child(4) {
    width: 30%;
    /* background-color: aqua; */
}


.tabBox {
    width: 100%;
    height: 98%;
    overflow: scroll;
}

.tabBox::-webkit-scrollbar {
    display: none;
}

.tabmain {
    padding: 21.9975px 0;
}

.btn1 {
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #986B15;
}

.btn2 {
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #CE192A;
}

.btn3 {
    padding-bottom: 3.9975px;
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2C1BD5;
    border-bottom: .9975px solid #2C1BD5;
}









.diaBox {
    position: relative;
    width: 654px;
    height: 482.0025px;
    background-image: url(../../assets/distribution/hisDia.png);
    background-size: 100% 100%;
    border-radius: 20.0025px;
}

.diaTitle {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
}

.objBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20.0025px 42px;
    width: 100%;
    border-bottom: 2.0025px solid #CAAC73;
    font-size: 27.9975px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #986B15;
}

.resBox {
    box-sizing: border-box;
    padding: 24px;
    width: 100%;
    /* background-color: #ccc; */
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #986B15;
}

.resBox>div:first-child {
    margin-bottom: 20.0025px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #CAAC73;
}

.emptyBox {
    margin-top: 200.0025px;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #986B15;
}

.jiangImg {
    z-index: 20;
    position: fixed;
    top: 999.9975px;
    right: 20.0025px;
    width: 111.9975px;
    height: 140.0025px;
}

.showdiaBox {
    box-sizing: border-box;
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 30000;
}

.dialog {
    width: 288px;
    background: #F8E3E6;
    position: relative;
    border-radius: 10px;
    padding-bottom: 28px;
}

.price-top {
    width: 320px;
    position: absolute;
    left: 50%;
    margin-left: -160px;
    top: -70px;

}

.dia-title {
    font-size: 30px;
    font-weight: bold;
    color: #D9374E;
    text-align: center;
    padding-top: 40px;
}

.dia-text {
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
    padding-top: 8px;
    text-align: center;
    color: #7C595E;
}

.dia-noprice {
    position: relative;
    margin-top: 22px;
    width: 160px;
    left: 50%;
    margin-left: -80px;
    margin-bottom: 28px;
}

.btnBox {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 288px;
}

.btnBox>div:first-child {
    margin-top: 20px;
    width: 205px;
    height: 49px;
    line-height: 49px;
    background: linear-gradient(0deg, #FE6566, #F72268);
    background: linear-gradient(0deg, #5C24B3, #8750DD);
    border-radius: 25px;
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
}



.upimgBox {
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    margin: 20px;
    width: 250px;
    /* height: 250px; */
    border: 1px dashed #A77CEB;
}

.van-image {
    width: 68px !important;
    height: 68px !important;
}

.van-uploader {
    position: relative !important;
    width: 250px;
    /* height: 250px; */
}

.uplader {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 70px;
    height: 70px;
    font-size: 14px;
    color: #A77CEB;
}

.uplader>.van-icon {
    font-size: 48px !important;
}



.waitBtn {
    margin-top: 20px;
    font-size: 28px;
    color: #999;
    border-bottom: 2px solid #999;
}


.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>